<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { IconifyIcon } from '@vben/icons';
import {
  Button,
  Card,
  Col,
  Descriptions,
  Divider,
  message,
  Modal,
  Row,
  Space,
  Steps,
  Tag,
  Typography,
  Table,
} from 'ant-design-vue';

const { Title, Text } = Typography;
const route = useRoute();
const router = useRouter();

// 订单详情数据
const orderDetail = ref({
  id: '1',
  orderNumber: 'ORD001',
  roomNumber: 'c122s',
  roomType: 'C122S型',
  guestSource: '美团',
  guestName: '21',
  contactPhone: '13579246810',
  idCard: '110101199001011234',
  payment: 140.0,
  consumption: 6300.0,
  preAuth: 0.0,
  checkInTime: '07-09 14:39',
  checkOutTime: '08-17 00:07',
  status: '未结',
  remarks: '',
  createTime: '2024-07-09 14:30:00',
  updateTime: '2024-08-17 10:00:00',
  // 消费明细
  consumptionDetails: [
    {
      id: '1',
      item: '房费',
      amount: 6000.0,
      quantity: 1,
      unitPrice: 6000.0,
      time: '2024-08-17 00:00:00',
    },
    {
      id: '2',
      item: '餐饮',
      amount: 200.0,
      quantity: 2,
      unitPrice: 100.0,
      time: '2024-08-16 18:30:00',
    },
    {
      id: '3',
      item: '洗衣服务',
      amount: 100.0,
      quantity: 1,
      unitPrice: 100.0,
      time: '2024-08-16 15:20:00',
    },
  ],
  // 支付记录
  paymentRecords: [
    {
      id: '1',
      method: '微信支付',
      amount: 100.0,
      time: '2024-07-09 14:35:00',
      status: '成功',
    },
    {
      id: '2',
      method: '支付宝',
      amount: 40.0,
      time: '2024-07-09 14:40:00',
      status: '成功',
    },
  ],
  // 操作记录
  operationLogs: [
    {
      id: '1',
      operation: '创建订单',
      operator: '系统',
      time: '2024-07-09 14:30:00',
      remark: '美团订单自动创建',
    },
    {
      id: '2',
      operation: '办理入住',
      operator: '前台',
      time: '2024-07-09 14:39:00',
      remark: '客人已入住',
    },
    {
      id: '3',
      operation: '续住',
      operator: '前台',
      time: '2024-08-10 12:00:00',
      remark: '客人要求续住',
    },
  ],
});

// 当前步骤
const currentStep = ref(1);

// 获取客源颜色
const getGuestSourceColor = (source: string) => {
  const colors = {
    美团: 'green',
    携程: 'blue',
    散客: 'orange',
    团队: 'purple',
  };
  return colors[source] || 'default';
};

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colors = {
    未结: 'red',
    已结: 'green',
    已挂账: 'orange',
    已取消: 'gray',
  };
  return colors[status] || 'default';
};

// 计算余额
const balance = computed(() => {
  return orderDetail.value.consumption - orderDetail.value.payment;
});

// 查看订单详情
const viewOrder = () => {
  message.info('查看订单详情');
};

// 办理入住
const checkIn = () => {
  Modal.confirm({
    title: '确认入住',
    content: `确定要为订单 ${orderDetail.value.orderNumber} 办理入住吗？`,
    onOk: () => {
      message.success('入住办理成功');
    },
  });
};

// 续住
const extendStay = () => {
  Modal.confirm({
    title: '确认续住',
    content: `确定要为订单 ${orderDetail.value.orderNumber} 办理续住吗？`,
    onOk: () => {
      message.success('续住办理成功');
    },
  });
};

// 退房
const checkOut = () => {
  Modal.confirm({
    title: '确认退房',
    content: `确定要为订单 ${orderDetail.value.orderNumber} 办理退房吗？`,
    onOk: () => {
      message.success('退房办理成功');
    },
  });
};

// 结算
const settle = () => {
  Modal.confirm({
    title: '确认结算',
    content: `确定要为订单 ${orderDetail.value.orderNumber} 办理结算吗？`,
    onOk: () => {
      message.success('结算办理成功');
    },
  });
};

// 取消订单
const cancelOrder = () => {
  Modal.confirm({
    title: '确认取消',
    content: `确定要取消订单 ${orderDetail.value.orderNumber} 吗？`,
    onOk: () => {
      message.success('订单取消成功');
    },
  });
};

onMounted(() => {
  const orderId = route.params.id;
  // 这里可以根据orderId获取订单详情
  console.log('订单ID:', orderId);
});
</script>

<template>
  <div class="order-detail">
    <!-- 页面标题 -->
    <div class="page-header">
      <Title level="2">订单详情</Title>
      <Space>
        <Button @click="router.push('/hotel/order-management')">
          <IconifyIcon icon="ant-design:arrow-left-outlined" />
          返回列表
        </Button>
        <Button type="primary" @click="viewOrder">
          <IconifyIcon icon="ant-design:eye-outlined" />
          查看详情
        </Button>
      </Space>
    </div>

    <!-- 订单状态步骤 -->
    <Card class="status-card">
      <Steps :current="currentStep">
        <Steps.Step title="预订" description="订单已创建" />
        <Steps.Step title="入住" description="客人已入住" />
        <Steps.Step title="在住" description="客人正在住宿" />
        <Steps.Step title="退房" description="等待退房" />
        <Steps.Step title="结算" description="订单已完成" />
      </Steps>
    </Card>

    <!-- 订单基本信息 -->
    <Row :gutter="16" class="info-row">
      <Col :span="16">
        <Card title="订单信息" class="info-card">
          <Descriptions :column="2" bordered>
            <Descriptions.Item label="订单号">
              {{ orderDetail.orderNumber }}
            </Descriptions.Item>
            <Descriptions.Item label="房号">
              {{ orderDetail.roomNumber }}
            </Descriptions.Item>
            <Descriptions.Item label="房型">
              {{ orderDetail.roomType }}
            </Descriptions.Item>
            <Descriptions.Item label="客源">
              <Tag :color="getGuestSourceColor(orderDetail.guestSource)">
                {{ orderDetail.guestSource }}
              </Tag>
            </Descriptions.Item>
            <Descriptions.Item label="宾客姓名">
              {{ orderDetail.guestName }}
            </Descriptions.Item>
            <Descriptions.Item label="联系电话">
              {{ orderDetail.contactPhone }}
            </Descriptions.Item>
            <Descriptions.Item label="身份证号">
              {{ orderDetail.idCard }}
            </Descriptions.Item>
            <Descriptions.Item label="订单状态">
              <Tag :color="getStatusColor(orderDetail.status)">
                {{ orderDetail.status }}
              </Tag>
            </Descriptions.Item>
            <Descriptions.Item label="入住时间">
              {{ orderDetail.checkInTime }}
            </Descriptions.Item>
            <Descriptions.Item label="离店时间">
              {{ orderDetail.checkOutTime }}
            </Descriptions.Item>
            <Descriptions.Item label="备注">
              {{ orderDetail.remarks || '无' }}
            </Descriptions.Item>
            <Descriptions.Item label="创建时间">
              {{ orderDetail.createTime }}
            </Descriptions.Item>
          </Descriptions>
        </Card>
      </Col>

      <Col :span="8">
        <Card title="费用信息" class="fee-card">
          <div class="fee-item">
            <Text>已支付：</Text>
            <Text class="fee-amount"
              >¥{{ orderDetail.payment.toFixed(2) }}</Text
            >
          </div>
          <div class="fee-item">
            <Text>总消费：</Text>
            <Text class="fee-amount"
              >¥{{ orderDetail.consumption.toFixed(2) }}</Text
            >
          </div>
          <div class="fee-item">
            <Text>预授权：</Text>
            <Text class="fee-amount"
              >¥{{ orderDetail.preAuth.toFixed(2) }}</Text
            >
          </div>
          <Divider />
          <div class="fee-item">
            <Text strong>余额：</Text>
            <Text :class="balance > 0 ? 'fee-amount negative' : 'fee-amount'">
              ¥{{ balance.toFixed(2) }}
            </Text>
          </div>
        </Card>

        <Card title="快捷操作" class="action-card">
          <Space direction="vertical" style="width: 100%">
            <Button type="primary" block @click="checkIn">
              <IconifyIcon icon="ant-design:login-outlined" />
              办理入住
            </Button>
            <Button block @click="extendStay">
              <IconifyIcon icon="ant-design:clock-circle-outlined" />
              续住
            </Button>
            <Button block @click="checkOut">
              <IconifyIcon icon="ant-design:logout-outlined" />
              退房
            </Button>
            <Button type="primary" ghost block @click="settle">
              <IconifyIcon icon="ant-design:check-circle-outlined" />
              结算
            </Button>
            <Button danger block @click="cancelOrder">
              <IconifyIcon icon="ant-design:close-circle-outlined" />
              取消订单
            </Button>
          </Space>
        </Card>
      </Col>
    </Row>

    <!-- 消费明细 -->
    <Card title="消费明细" class="detail-card">
      <Table
        :columns="[
          { title: '项目', dataIndex: 'item', key: 'item' },
          { title: '数量', dataIndex: 'quantity', key: 'quantity' },
          { title: '单价', dataIndex: 'unitPrice', key: 'unitPrice' },
          { title: '金额', dataIndex: 'amount', key: 'amount' },
          { title: '时间', dataIndex: 'time', key: 'time' },
        ]"
        :data-source="orderDetail.consumptionDetails"
        :pagination="false"
        size="small"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'unitPrice'">
            ¥{{ record.unitPrice.toFixed(2) }}
          </template>
          <template v-else-if="column.key === 'amount'">
            ¥{{ record.amount.toFixed(2) }}
          </template>
        </template>
      </Table>
    </Card>

    <!-- 支付记录 -->
    <Card title="支付记录" class="detail-card">
      <Table
        :columns="[
          { title: '支付方式', dataIndex: 'method', key: 'method' },
          { title: '金额', dataIndex: 'amount', key: 'amount' },
          { title: '状态', dataIndex: 'status', key: 'status' },
          { title: '时间', dataIndex: 'time', key: 'time' },
        ]"
        :data-source="orderDetail.paymentRecords"
        :pagination="false"
        size="small"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'amount'">
            ¥{{ record.amount.toFixed(2) }}
          </template>
          <template v-else-if="column.key === 'status'">
            <Tag :color="record.status === '成功' ? 'green' : 'red'">
              {{ record.status }}
            </Tag>
          </template>
        </template>
      </Table>
    </Card>

    <!-- 操作记录 -->
    <Card title="操作记录" class="detail-card">
      <Table
        :columns="[
          { title: '操作', dataIndex: 'operation', key: 'operation' },
          { title: '操作人', dataIndex: 'operator', key: 'operator' },
          { title: '时间', dataIndex: 'time', key: 'time' },
          { title: '备注', dataIndex: 'remark', key: 'remark' },
        ]"
        :data-source="orderDetail.operationLogs"
        :pagination="false"
        size="small"
      />
    </Card>
  </div>
</template>

<style scoped>
.order-detail {
  padding: 24px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.status-card {
  margin-bottom: 24px;
}

.info-row {
  margin-bottom: 24px;
}

.info-card {
  height: 100%;
}

.fee-card {
  margin-bottom: 16px;
}

.fee-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.fee-amount {
  font-weight: bold;
  color: #52c41a;
}

.fee-amount.negative {
  color: #f5222d;
}

.action-card {
  height: 100%;
}

.detail-card {
  margin-bottom: 24px;
}

:deep(.ant-card-body) {
  padding: 16px;
}

:deep(.ant-descriptions-item-label) {
  width: 120px;
  font-weight: 500;
}
</style>
